<template>
	<view style="background-color:#e7e7e7 ; height: 100vh;">
		<back-nav message='我的优惠券' :back="back"></back-nav>
		<zy-segmented :values="items" activeColor='#73bc3d' @onClickItem="onClickItem"></zy-segmented>
		<view class="ChooseList">
			<view class="tag" @click="changeTab(1)" :class="Inv == 1?'activeTag' :''">
				<text>可使用</text>
				<text></text>
			</view>
			<view class="tag" @click="changeTab(2)" :class="Inv == 2?'activeTag' :''">
				<text>未开始</text>
				<text></text>
			</view>
			<view class="tag" @click="changeTab(3)"  :class="Inv == 3?'activeTag' :''">
				<text>已过期</text>
				<text></text>
			</view>
		</view>
		<!-- 优惠券列表 -->
		<view class="couponsBox">
			<cc-couponList2 :colors="colors" :couponList="couponList" @itemClick="jumpNext" v-if="flag==0"></cc-couponList2>
			<view class="none" v-else>
				<image src="../../../static/noneCoupon.png" mode="aspectFit"></image>
				<text>新鲜加载中...</text>
			</view>
			
		</view>
		<!-- 优惠券列表 -->
		<!-- <view class="tab-view tab-view-0" > -->
		    <!-- 				<view class="exchange-container">
					<input class="uni-input" placeholder="请输入兑换码" v-model="exchangeCode"/>
					<view :class="[exchangeCode ? 'orange' : '']" @click="exchange">兑换</view>
				</view> -->
		    <!-- <view class="list" v-show="Inv == 1">
		        <view class="red-packet" v-for="(item, index) in validPackets" :key="index">
		            <view class="red-packet-top-left">
		                <view class="money">
		                    <text>￥</text>
		                    <text>{{item.amount}}</text>
		                </view>
		                <view>满{{item.cill}}元可用</view>
		            </view>
		            <view class="red-packet-top-right">
		                <view class="">{{item.redPackName}}</view>
		                <view class="date">
		                    <text>{{item.createTime}}至{{item.expireTime}}</text>
		                </view>
		            </view>
		            <view class="red-packet-bottom" @click="changeEllipsis(item)">
		                <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
		                <image src="/static/icons/down.png"></image>
		                
		            </view>
		        </view>
				<view class="" v-show="validTotal==0">
					<view class="couponsBox"  >
						
						<view class="none" >
							<image src="../../../static/icons/nullCoupon.png" mode="aspectFit"></image>
							<view class="text">
								<text>您还没有可用优惠券</text>
								<text>快去领券中心领取吧~</text>
							</view>
						</view>
						
					</view>
				</view>
		    </view> -->
			
		<!-- </view> -->
		<!-- <view class="tab-view tab-view-expire" >
		    <view class="list" v-show="Inv == 2">
		        <view class="red-packet" v-for="(item, index) in hasUsedPackets" :key="index">
		            <view class="red-packet-top-left">
		                <view class="money">
		                    <text>￥</text>
		                    <text>{{item.amount}}</text>
		                </view>
		                <view>满{{item.cill}}元可用</view>
		            </view>
		            <view class="red-packet-top-right">
		                <view class="">{{item.redPackName}}</view>
		                <view class="date">
		                    <text>已使用</text>
		                </view>
		            </view>
		            <view class="red-packet-bottom">
		                <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
		                <image src="/static/icons/down.png"></image>
		            </view>
		        </view>
				
				<view class="" v-show="usedTotal==0">
					<view class="couponsBox" >
						
						<view class="none" >
							<image src="../../../static/icons/nullCoupon.png" mode="aspectFit"></image>
							<view class="text">
								<text>您还没有可用优惠券</text>
								<text>快去领券中心领取吧~</text>
							</view>
						</view>
						
					</view>
				</view>
		    </view>
			
		</view> -->
		<!-- <view class="tab-view tab-view-expire" >
		    <view class="list" v-show="Inv == 3">
		        <view class="red-packet" v-for="(item,index) in expiredPackets" :key="index">
		            <view class="red-packet-top-left">
		                <view class="money">
		                    <text>￥</text>
		                    <text>{{item.amount}}</text>
		                </view>
		                <view>满{{item.cill}}元可用</view>
		            </view>
		            <view class="red-packet-top-right">
		                <view class="">{{item.redPackName}}</view>
		                <view class="date">
		                    <text>已过期</text>
		                </view>
		            </view>
		            <view class="red-packet-bottom">
		                <view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
		                <image src="/static/icons/down.png"></image>
		                
		            </view>
		        </view>
				
					<view class="couponsBox" v-show="expiredTotal==0">
						
						<view class="none" >
							<image src="../../../static/icons/nullCoupon.png" mode="aspectFit"></image>
							<view class="text">
								<text>您还没有可用优惠券</text>
								<text>快去领券中心领取吧~</text>
							</view>
						</view>
						
					</view>
				
		    </view>
			
		</view> -->
		



 
		<!-- 提示弹框 -->
		<view class="modalDlg-mask" v-if="(showModal)"></view>
		<view class="modalDlg" v-if="(showModal)">
			<view class="page-body">
				<view class="modalDlg-content">您尚未绑定手机号</view>
				<view class="modalDlg-content-item">是否绑定手机号？</view>
				    <view class="modalDlg-footer">
					   <button @click="closeModal" class="modalDlg-btn closeBtn">取消</button>
					   <button @click="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn"
						open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button>
				</view>
			</view>
		</view>
		
		<view class="bottomBox" >
			<view class="myCoupon2" @click="JumpActive">
				<p>领券中心</p>
			</view>
		</view>
	</view>
</template>

<script>
	import appconf from "@/common/appconf.js";
	const domain = appconf.domain;
	import zySegmented from "@/uni_modules/zy-segmented-control/components/zy-segmented-control/zy-segmented-control.vue";
	export default {
		components: {
			zySegmented
		},
		data() {
			return {
				flag: 0,
				noneFlag: false,
				items: ['今日秒杀', '下期预告'], //分段器名称
				current: 1, //分段器默认初始值
				noMore: false, // 没有更多了
				Inv: 1,
				exchangeCode: '',
				validPackets: [],
				hasUsedPackets: [],
				expiredPackets: [],
				hasGetUsedList: false, // 是否请求过已使用表单
				hasGetexpiredList: false, // 是否请求过已过期表单
				validTotal: 0,
				usedTotal: 0,
				expiredTotal: 0,
				validPageNo: 1,
				validPageSize: 5,
				usedPageNo: 1,
				usedPageSize: 5,
				expiredPageNo: 1,
				expiredPageSize: 5,
				colors: '#dfe6f1',
				couponList: [{
						name: '满105减5',
						dates: '2023-07-09 2023-08-02',
						status: 0,
						money: 105,
						sub: 5
					},
					{
						name: '满200减10',
						dates: '2023-07-19 2023-08-22',
						status: 0,
						money: 200,
						sub: 10
					}, 
				],
			}
		},
	
		onLoad() {
			const onLogin = () => {
				this.getRedPacket(this.Inv); // 获取订单
			}
			this.$util.checkLogin(this, onLogin);
		},
		onReachBottom() {
			console.log('下滑')
			console.log(this.Inv, 'inv')
			console.log(this.validPackets, '--', this.validTotal)
			switch (this.Inv) {
				case 1:
					if (this.validPackets.length < this.validTotal) {
						this.validPageNo++;
						this.getRedPacket(1)
					}
					break;
				case 2:
					this.usedPageNo++;
					if (this.hasUsedPackets.length < this.usedTotal) {
						this.validPageNo++;
						this.getRedPacket(2)
					}
					break;
				case 3:
					this.expiredPageNo++;
					if (this.expiredPackets.length < this.expiredTotal) {
						this.validPageNo++;
						this.getRedPacket(3)
					}
					break;
				default:
					break;
			}
	
		},
		methods: {
			JumpActive() {
				uni.navigateTo({
					url: "/pages/index/active/active"
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 分段器选项发生改变时触发
			onClickItem(e) {
				this.current = e
				console.log('e:', e)
				this.flag = e
	
	
			},
			changeTab(Inv) {
				this.Inv = Inv;
				switch (Inv) {
					case 1:
						break;
					case 2:
						!this.hasGetUsedList && this.getRedPacket(Inv);
						break;
					case 3:
						!this.hasGetexpiredList && this.getRedPacket(Inv);
						break;
					default:
						break;
				}
				this.$forceUpdate()
			},
			exchange() {
				const code = this.exchangeCode
				let userId = this.$store.state.userInfo.userId
				if (!code) {
					uni.showToast({
						title: '请输入兑换码',
						icon: "none"
					});
					return false
				}
				const data = {
					code: code,
					userId: userId
				}
				this.$request(this.$api.ExchangeRedPacket, data, 'get').then(res => {
					if (res.code === 200) {
						console.log(res)
						uni.showToast({
							title: '兑换成功',
							icon: "none"
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			changeEllipsis(item) {
				item.ellipsis = !item.ellipsis
			},
			getRedPacket(Inv) {
				let pageNo, pageSize
				switch (Inv) {
					case 1:
						pageNo = this.validPageNo
						pageSize = this.validPageSize
						break;
					case 2:
						this.hasGetUsedList = true;
						pageNo = this.usedPageNo
						pageSize = this.usedPageSize
						break;
					case 3:
						this.hasGetexpiredList = true;
						pageNo = this.expiredPageNo
						pageSize = this.expiredPageSize
						break;
					default:
						break;
	
				}
				let userId = this.$store.state.userInfo.userId
				let data = {
					pageNo,
					pageSize,
					status: Inv,
					userId
				}
				this.$request(this.$api.getRedPacket, data, 'get').then(res => {
					if (res.code === 200) {
						let list
						switch (Inv) {
							case 1:
								list = this.validPackets;
								this.validTotal = Number(res.result.total)
								break;
							case 2:
								list = this.hasUsedPackets;
								this.usedTotal = Number(res.result.total)
								break;
							case 3:
								list = this.expiredPackets;
								this.expiredTotal = Number(res.result.total)
								break;
						}
						res.result.records.forEach(item => {
							item.ellipsis = true
							item.deviceIdStr = ""
							for (let i = 0; i < item.deviceList.length; i++) {
								if (item.deviceIdStr == "") {
									item.deviceIdStr += item.deviceList[i]['deviceId']
									console.log(item.deviceIdStr)
								} else {
									item.deviceIdStr += "、"
									item.deviceIdStr += item.deviceList[i]['deviceId']
								}
							}
							list.push(item);
							this.couponList=list;
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}
	.activeTag{
		background-color: #e3ecf4 !important;
		color: #1e63ab !important;
		border:1rpx solid #004ea0 !important
	}
	.swiper {
		padding: 10px 10px 0;
	}

	.list {
		// margin-top: 10px;
	}
	.ChooseList{
		height: 5vh;
		width: 90%;
		margin-top: 30rpx;
		display: flex;
		
		.tag{
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #c7c7c7;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #666;
		}
	}
	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 24vw;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.myCoupon {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}
		.myCoupon2 {
			padding: 0 40rpx;
			height: 70rpx;
			width: 500rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}

		.dingyue {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: #004ea0 1px solid;
			color: #004ea0;
		}

		// justify-content:center;
		// align-items: space-around;
	}


	.couponsBox {
		background-color: white;
		border-radius: 10rpx;
		width: 700rpx;
		height: 60vh;
		margin: 20rpx auto;
		padding-top: 40upx;
		padding-bottom: 30upx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		overflow: auto;
	}
	.none{
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 700rpx;
			height: 230rpx;
		}
		.text{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
		}
		text{
			color: #c7c7c7;
			font-size: 29rpx;
		}
	}

	.coupons-left {
		display: flex;
		border-right: 1px dashed red;
		min-width: 0;
		flex: 1;
	}

	.content {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.time-item {
		color: red;
	}

	.name {
		font-size: 18px;
		font-weight: normal;
	}

	.coupons-right {
		display: flex;
		align-items: center;
		width: 200rpx;
		justify-content: center;
	}

	.buttonClass {
		width: 90%;
		font-size: 14px;
		background-color: red;
		color: #fff;
	}

	.y {
		width: 90%;
		font-size: 14px;
		background-color: gray;
		color: #fff;
	}





	/* 弹框 */
	.page-body {
		width: 320px;
		text-align: center;
		font-size: 18px
	}

	/* 遮罩层 */
	.modalDlg-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 9000;
		opacity: 0.5;
	}

	/* 弹出层 */
	.modalDlg {
		width: 70%;
		height: 30%;
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		z-index: 9999;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modalDlg-content {
		margin: 20px 0;
	}

	.modalDlg-content-item {
		font-size: 15px;
	}

	.modalDlg-title {
		font-size: 18px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0rpx;
	}


	.modalDlg-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx 0;
	}

	.modalDlg-content .modalDlg-content-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.modalDlg-content .modalDlg-content-item radio-group {
		width: 100%;
		color: #666;
	}

	.modalDlg-content .modalDlg-content-item .weui-check__label {
		display: flex;
		align-items: center;
	}

	.modalDlg-content .modalDlg-content-item .weui-cell__bd {
		line-height: 48rpx;
	}

	.modalDlg-content .modalDlg-content-item .weui-cell {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.modalDlg-footer {
		width: 100%;
		height: 100rpx;
		margin-top: 20px;
		/* 		border-top: 1rpx solid #ededed;
 */
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	/* 弹出层里面的文字 */
	.modalDlg .modalDlg-content text {
		text-align: justify;
		font-size: 28rpx;
		color: #666;
		/* margin-left:10px; */
	}

	/* 弹出层里面的按钮 */
	.modalDlg-btn {
		width: 80px;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.modalDlg .modalDlg-footer .closeBtn {
		background: #fff;
		color: #fc4141;
		border: 1rpx solid #fc4141;
	}

	.modalDlg .modalDlg-footer .confirmBtn {
		background: #fc4141;
		color: #fff;
	}
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;border-bottom: 2rpx solid #e1e1e1;}
	.inv-h{font-size: 28rpx;flex: 1;text-align: center;color: #000;height: 100upx;line-height: 100upx;display: flex;justify-content: center;}
	.inv-h-se > text{color: #e82050;border-bottom: 4rpx solid #e82050;}
	.exchange-container{
		width: 100%;
		height: 100rpx;
		background-color: #f2f2f2;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.exchange-container input{
		padding-left: 40rpx;
		border-radius: 50rpx;
		height: 100%;
		width: 70%;
		background-color: #fff;
		border: 2rpx solid #D9D9D9;
	}
	.exchange-container view{
		height: 100%;
		width: 20%;
		background-color: #D9D9D9;
		border-radius: 50rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.exchange-container .orange{
		background-color: #FFDA00;
	}
	.list{
		padding: 22rpx;
		padding-top: 0;
	}
	.red-packet{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background-color: #faebeb;
		box-sizing: border-box;
		border: 2rpx solid #eac1c1;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #444;
		margin-top: 30rpx;
	}
	.red-packet .red-packet-top-left{
		width: 30%;
		height: 150rpx;
		border-right: 2rpx dashed #eac1c1;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.red-packet .money text:nth-child(2){font-size: 60rpx;font-weight: bold;}
	.red-packet .red-packet-top-right{
		width: 70%;
		height: 150rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
	}
	.red-packet .red-packet-top-right view:first-child{
		margin-top: 44rpx;
	}
	.red-packet .red-packet-top-right .date{
		color: #b0adad;
		margin-top: 20rpx;
	}
	.red-packet .red-packet-bottom{
		width: 100%;
		/* height: 58rpx; */
		border-top: 2rpx dashed #eac1c1;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:30rpx 40rpx;
	}
	.red-packet .red-packet-bottom view{
		width: 90%;
		word-break: break-all;
	}
	.red-packet .red-packet-bottom .ellipsis{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.red-packet .red-packet-bottom image{
		height: 24rpx;
		width: 24rpx;
	}
	.color-red{
		color: #ea3e66;
	}
	.date .color-red{margin-left: 20rpx;}
	
	
	
	.tab-view-expire .list .red-packet{
		background-color: #F1F1F1;
		border-color: #c1c1c1;
	}
	.tab-view-expire .list .red-packet .red-packet-bottom{
		border-color: #c1c1c1;
	}
	.tab-view-expire .list .red-packet .red-packet-top-left{
		border-color: #c1c1c1;
	}
	.tab-view-expire .list .red-packet .red-packet-top-right{
		border-color: #c1c1c1;
	}
</style>